<template>
  <lay-container
    fluid="true"
    style="padding: 10px">
    <lay-card>
      <lay-row :space="10">
        <lay-col :md="24">
          <lay-button
            type="primary"
            @click="toSearch"
            >休息</lay-button
          >
          <lay-button
            type="primary"
            @click="toSearch"
            >小夜班</lay-button
          >
          <lay-button
            type="primary"
            @click="toSearch"
            >常白班两卡</lay-button
          >
          <lay-button
            type="primary"
            @click="toSearch"
            >哺乳</lay-button
          >
          <lay-button
            type="primary"
            @click="toSearch"
            >白班</lay-button
          >
          <lay-button
            type="primary"
            @click="toSearch"
            >专项修小夜班</lay-button
          >
          <lay-button
            type="primary"
            @click="toSearch"
            >哺乳2</lay-button
          ><lay-button
            type="primary"
            @click="toSearch"
            >调度夜班</lay-button
          ><lay-button
            type="primary"
            @click="toSearch"
            >夜班</lay-button
          ><lay-button
            type="primary"
            @click="toSearch"
            >调度白班</lay-button
          >
        </lay-col>
        <lay-col :md="24">
          <lay-form
            style="margin-top: 20px"
            :model="queryParams"
            size="xs">
            <lay-row>
              <lay-col :md="8">
                <lay-form-item label="日期区间:">
                  <a-range-picker style="width: 254px; marginbottom: 20px" />
                  <lay-radio
                    v-model="queryParams.radio"
                    style="margin-left: 20px"
                    name="action"
                    :value="1"
                    label="按时间"></lay-radio>
                  <lay-radio
                    v-model="queryParams.radio"
                    name="action"
                    :value="2"
                    label="按班别"></lay-radio>
                </lay-form-item>
              </lay-col>

              <lay-col :md="9">
                <lay-form-item label-width="0">
                  <div>
                    <lay-button
                      type="primary"
                      @click="toSearch"
                      >刷新</lay-button
                    >
                    <lay-button
                      @click="toReset"
                      disabled
                      >重置重置</lay-button
                    >
                    <lay-button
                      @click="toReset"
                      disabled
                      >重置重置</lay-button
                    >
                    <lay-button
                      @click="toReset"
                      disabled
                      >重置重置</lay-button
                    >
                    <lay-button
                      @click="toReset"
                      disabled
                      >重置重置</lay-button
                    >
                  </div>
                </lay-form-item>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-col>
        <lay-col :md="24">
          <lay-card>
            <lay-table
              :page="page"
              :autoColsWidth="true"
              :columns="columns"
              :dataSource="dataSource"
              :default-toolbar="defaultToolbar"
              v-model:selectedKeys="selectedKeys"
              size="sm"
              @row="rowClick"
              @change="change">
              <template v-slot:toolbar>
                <lay-button
                  size="sm"
                  type="primary"
                  >新增</lay-button
                >
                <lay-button size="sm">删除</lay-button>
              </template>
              <template v-slot:username="{ data }">
                {{ data.username }}
              </template>
              <template v-slot:password="{ data }">
                {{ data.password }}
              </template>
              <template v-slot:operator="{}">
                <lay-button
                  size="xs"
                  type="primary"
                  >修改</lay-button
                >
                <lay-button size="xs">删除</lay-button>
              </template>
              <template v-slot:footer>
                {{ selectedKeys }}
              </template>
            </lay-table>
          </lay-card>
        </lay-col>
      </lay-row>
    </lay-card>
  </lay-container>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { layer } from '@layui/layer-vue';

const selectedKeys = ref(['1']);
const checkbox = ref(true);
const defaultToolbar = ref(true);

const queryParams = ref({});

const page = ref({ total: 100, limit: 10, current: 2 });

const columns = [
  {
    title: '部门',
    width: '20px',
    fixed: 'left',
    type:'checkbox',
    sort: 'desc',
    totalRow: true,
    ellipsisTooltip: true,
  },
  
  {
    title: '姓名',
    width: '180px',
    key: 'status',
    customSlot: 'status',
    sort: 'desc',
    totalRow: true,
    ellipsisTooltip: true,
  },
  {
    title: '员工组',
    width: '80px',
    key: 'name',
    totalRow: true,
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '排班时数',
    width: '120px',
    key: 'email',
    totalRow: true,
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '请假工时',
    width: '80px',
    key: 'sex',
    totalRow: true,
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '员工状态',
    width: '80px',
    key: 'age',
    totalRow: true,
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '职位',
    width: '120px',
    totalRow: true,
    key: 'city',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '详细',
    width: '60px',
    totalRow: true,
    customSlot: 'operator',
    key: 'operator',
    fixed: 'right',
    ignoreExport: true,
  },
];

const dataSource = [
  {
    id: '1',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '2',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '3',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '4',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '5',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '6',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '7',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '8',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '9',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '10',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '11',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
];

const rowClick = function (data: any) {};

const rowDoubleClick = function (data: any) {};

const change = function ({ current, limit }: any) {
  layer.msg('current:' + current + ' limit:' + limit);
};
function toSearch() {
  layer.load(2, { time: 3000 });
}
const searchAccount = ref('');
const searchEmail = ref('');
function toReset() {
  searchAccount.value = '';
  searchEmail.value = '';
}

// return {
//   columns,
//   dataSource,
//   selectedKeys,
//   checkbox,
//   defaultToolbar,
//   page,
//   rowClick,
//   rowDoubleClick,
//   change,
//   toReset,
//   toSearch,
//   searchAccount,
//   searchEmail
// }
</script>
